<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/goods/goods_detail.css" />
	<script type="text/javascript">
		(function () {
			var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
			clientWidth = clientWidth || localStorage.getItem("clientWidth")
			if (clientWidth > 750)
				clientWidth = 750;
			document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
		})();
	</script>
	<script>
		var h5pullDown = true;
	</script>

	<style type="text/css">
		.mui-preview-image.mui-fullscreen {
			position: fixed;
			z-index: 99999;
			background-color: #000;
		}

		.mui-preview-header,
		.mui-preview-footer {
			position: absolute;
			width: 100%;
			left: 0;
			z-index: 10;
		}

		.mui-preview-header {
			height: 44px;
			top: 0;
		}

		.mui-preview-footer {
			height: 50px;
			bottom: 0px;
		}

		.mui-preview-header .mui-preview-indicator {
			display: block;
			line-height: 25px;
			color: #fff;
			text-align: center;
			margin: 15px auto 4;
			width: 70px;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 12px;
			font-size: 16px;
		}

		.mui-preview-image {
			display: none;
			-webkit-animation-duration: 0.5s;
			animation-duration: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}

		.mui-preview-image.mui-preview-in {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
		}

		.mui-preview-image.mui-preview-out {
			background: none;
			-webkit-animation-name: fadeOut;
			animation-name: fadeOut;
		}

		.mui-preview-image.mui-preview-out .mui-preview-header,
		.mui-preview-image.mui-preview-out .mui-preview-footer {
			display: none;
		}

		.mui-zoom-scroller {
			position: absolute;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			-webkit-backface-visibility: hidden;
		}

		.mui-zoom {
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}

		.mui-slider .mui-slider-group .mui-slider-item img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
		}

		.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
			width: 100%;
		}

		.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
			display: inline-table;
		}

		.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
			display: table-cell;
			vertical-align: middle;
		}

		.mui-preview-loading {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: none;
		}

		.mui-preview-loading.mui-active {
			display: block;
		}

		.mui-preview-loading .mui-spinner-white {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -25px;
			margin-top: -25px;
			height: 50px;
			width: 50px;
		}

		.mui-preview-image img.mui-transitioning {
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
		}

		@-webkit-keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}

		@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}

		@-webkit-keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}

		@keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}

		p img {
			max-width: 100%;
			height: auto;
		}
	</style>

	<style type="text/css">
		.mui-bar-nav {
			top: 0;
		}

		.mui-content {
			padding-bottom: 100px;
			padding-top: 44px !important;
		}

		html,
		body {
			padding-top: 0;
		}

		.mui-content {
			padding-top: 0px !important;
		}

		.mui-scroll-wrapper {
			top: 45px;
		}

		.youxiangtehui {
			font-size: 0.4rem;
			margin: 0;
			padding: 0;
			background: linear-gradient(to right, #ff6b23, #ff1610);
			display: inline-block;
			color: #fff;


			vertical-align: middle;
			padding-left: 0.2rem;
			padding-right: 0.2rem;
			border-radius: 5px;
			margin-right: 0.3rem;
		}

		.loading {
			width: 100%;
			height: 100%;
			background-color: #fff;
			position: fixed;
			z-index: 10000;
		}

		.ptsp_confirm_goods .ptsp_confirm_goods_info .goods_img {
			overflow: hidden;
		}
		.ptsp_goods_info img{
   
     float: left;
   
}
.ptsp_goods_info p{
  margin-bottom: 0;
}
	</style>
</head>

<body>
	<div class="body">

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon  mui-pull-left">
				<img src="../images/ptsp/left_arr_03.png" alt="">
			</a>
			<h1 class="mui-title">
				<span class="ptsp_active" @click="to_goods(event)">
					商品
				</span>
				<span @click="to_say(event)">
					评价
				</span>
				<span @click="to_detail(event)">
					详情
				</span>
			</h1>
		</header>

		<div class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--这里放置真实显示的DOM内容-->
				<div class="mui-content">
					<div class="ptsp_banner" id='shangpin'>
						<div id="slider" class="mui-slider">
							<div class="mui-slider-group mui-slider-loop">
								<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="#">
										<img :src="wareInfoGroup.firstPic" style="width: 100%;">
									</a>
								</div>
								<!-- 第一张 -->
								<div class="mui-slider-item" v-for="picItem in wareInfoGroup.pics">
									<a href="#">
										<img :src="picItem" style="width: 100%;">
									</a>
								</div>
								<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="#">
										<img :src="wareInfoGroup.lastPic" style="width: 100%;">
									</a>
								</div>
							</div>

						</div>
						<div class="ptsp_pic_num">
							<span class="ptsp_pic_i"></span>/
							<span class="ptsp_pic_n"></span>
						</div>
					</div>
					<div class="ptsp_goods_info" id="goods_info">

						<div class="youxiangtehui" v-show="goods_tag_show" v-for="(i,k) in goods_tag_list" v-html="i.tag_name"></div>

						<div class="title" v-html="wareInfoGroup.name">

						</div>
						<div class="price">
							<div>
								<span class="sale_price">￥
									<span v-html="wareInfoGroup.min_price"></span>
								</span>
								<span>￥
									<span v-html="wareInfoGroup.max_price"></span>
								</span>
								<span class="fr">库存:
									<span v-html="wareInfoGroup.stock"></span>
								</span>
							</div>
							<div>
								<span>销量:
									<span v-html="wareInfoGroup.sales"></span>
								</span>
								<div class="pick_num fr">
									<span @click="cut_num">-</span>
									<span v-html="goods_num"></span>
									<span @click="add_num">+</span>
								</div>
							</div>
						</div>

					</div>
					<div class="hr_20"></div>

					<div class="ptsp_users" @click="open_discount_box">
						<div class="title">优惠券
							<span style="float: right;">领取</span>
						</div>
					</div>

					<div class="hr_20"></div>

					<div class="ptsp_users" v-if="wareInfoGroup.spell == 1">
						<div class="title">正在拼团</div>
						<div class="user_info" v-for="(spellItem,index) in wareInfoGroup.spell_list">
							<img class="fl" :src="spellItem.head" alt="" />
							<span class="user_name fl" v-html="spellItem.nickname"> </span>
							<div class="to_join fr" @click="publishOrder({id:spellItem.id,attrid:spellItem.attrid,num:spellItem.number})">去参团</div>
							<div class="time fr" style="line-height: 30px">
								<span>还差
									<span v-html="spellItem.num"></span> 人成团</span>
								<br/>
								<!--<span>剩余 09:20:20</span>-->
							</div>
						</div>
					</div>
					<div class="hr_20"></div>

					<div class="ptsp_say" id='pingjia'>
						<div class="title">
							商品评价
						</div>
						<div class="user_say" v-for="(commentItem,key) in commentGroup">
							<!--{{commentItem.creatTime}}-->
							<div>
								<img class="user_img" :src="commentItem.wxhead" />
								<span v-html="commentItem.nickname"> </span>

							</div>
							<div class="user_img" style="clear: both;"></div>
							<div class="user_msg">
								<span style="color: #888888;" v-html="commentItem.createtime"> </span>
								<!--<span style="color: #1c83fc;">颜色分类：白色双到款（一杯两刀）{{commentItem}}</span>-->
								<div style="color: #353535;" v-html="commentItem.content"> </div>
								<div class="img_list">
									<img :src="picItem" data-preview-src="" :data-preview-group="key" style="width: 3.632rem;margin-right: 0.2rem;" alt="" v-for="picItem in commentItem.pics">
								</div>
							</div>
						</div>
					</div>

					<div class="hr_20" id='xiangqing'></div>
					<div class="ptsp_goods_info ptsp_goods_info_img">
						<div class="title">商品详情</div>
						<div class="info" v-html="wareInfoGroup.content">
						</div>
					</div>

				</div>
			</div>

		</div>

		<div class="ptsp_share" @click="open_share">
			<img src="../images/ptsp/share_03.png" alt="" />
			<div>分享</div>
		</div>

		<!-- 优惠券 容器 -->
		<transition name="slide-fade">
			<div class="discount_box" v-if="discount_box_is_show">
				<div class="title">优惠券</div>
				<div class="discount_list">

					<div :class="i.geted?'discount_item geted':'discount_item'" v-for="(i,k) in discount_data_list" @click="get_this_discount(k)">
						<div class="price ">
							<span class="price_tag">￥</span>
							<span class="price_num">{{i.money}}</span>
						</div>

						<div class="price_text">优惠券</div>
						<div class="des_text">{{i.couponconter}}</div>
						<div class="des_date">{{i.starttime}}-{{i.endtime}}</div>

					</div>
				</div>
			</div>
		</transition>

		<div class="ptsp_footer">
			<!-- <div class="icon_box" @click="call_kefu">
				<img src="../images/ptsp/icon_03.png" alt="" />
				<div>客服</div>
			</div> -->
			<div class="icon_box" @click="collect">
				<img :src="collect_icon" alt="" />
				<div>收藏</div>
			</div>
			<div class="icon_box" @click="show_sel_box({type:0,way:0})">
				<img :src="buy_car_icon" alt="" />
				<div>加入购物车</div>
			</div>

			<div class="buy_team" @click="show_sel_box({type:1,groupBuying:true,way:2})" v-if="wareInfoGroup.spell == 1">
				<div>￥
					<span v-html="wareInfoGroup.spell_money"></span>
				</div>
				<div>
					<span v-html="wareInfoGroup.count"></span> 人拼团</div>
			</div>
			<div class="buy_only" @click='show_sel_box({type:1,groupBuying:false,way:1})' :style="'background:'+goods_pt_buy_bg ">
				<div>￥
					<span v-html="wareInfoGroup.min_price"></span>
				</div>
				<div>立即购买</div>
			</div>
		</div>

		<transition name="slide-fade">
			<div class="ptsp_confirm_goods" v-show="confirm_goods_is_show">
				<div class="ptsp_confirm_goods_info">
					<i class="mui-icon mui-icon-closeempty" @click="close_sel_box"></i>
					<div class="goods_img">
						<img :src="wareInfoGroup.firstPic" alt="" />

					</div>
					<div class="price">

						<span class="wareInfoGroup.min_price">￥
							<span>{{buy_goods_way=='group'?group_sale_price:now_sale_price}}</span>
						</span>
						<br/>
						<span class="">库存：
							<span v-html="wareInfoGroup.stock"></span>
						</span>
						<br/>
						<span class="">已选：
							<span style="color: #1c83fc;">
								<span v-html="currentSpecification ? currentSpecification.rule : '暂无选择'"></span>
							</span>
						</span>
					</div>

					<div class="sel_color">
						<p>颜色</p>
						<div class="color_items select_color">
							<div class="item" :class="currentSpecificationIndex == index ? 'active' : ''" @click="specificationActive(index)" v-for="(specificationItem,index) in wareInfoGroup.specification"
							 v-html="specificationItem.rule">
							</div>

						</div>
					</div>

					<div class="sel_num">
						<p>数量</p>
						<div class="num_btns">
							<div class="cut" @click="cut_num">-</div>
							<div class="num" v-html="goods_num">0</div>
							<div class="add" @click="add_num">+</div>

						</div>
					</div>
					<br/>
					<br/>

				</div>
				<div class="btn" @click="go_confirm_oreder()">确认</div>
			</div>

		</transition>

		<transition name="slide-fade">
			<div class="share_box" v-show="share_box_is_show">
				<div class="share_box_item" @click="share_fun(1)">
					<img src="../images/wx.png" alt="">
					<div>分享好友</div>
				</div>
				<div class="share_box_item" @click="share_fun(2)">
					<img src="../images/pyq.png" alt="">
					<div>分享朋友圈</div>
				</div>
				<div class="share_box_item" @click="share_fun(3)">
					<img src="../images/qq.png" alt="">
					<div>分享QQ</div>
				</div>
				<div class="share_box_item" @click="share_fun(4)">
					<img src="../images/link.png" alt="">
					<div>复制链接</div>
				</div>
			</div>
		</transition>
	</div>

	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue.min.js"></script>
	<script src="../js/tools/util.js"></script>
	<script src="../js/host.config.js"></script>
	<script src="../js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tools/share.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tools/share_config.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/logic/goods_detail.js" type="text/javascript" charset="utf-8"></script>

</body>

</html>